<style type="text/css">
  .demo {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border: 10px solid #ccc;
    border-radius: 60px;
    font-size: 20px;
  }

  #demo1 {
    -webkit-transition:border-color 1s ease;
    -moz-transition:border-color 1s ease;
    -ms-transition:border-color 1s ease;
    -o-transition:border-color 1s ease;
    transition:border-color 1s ease;
  }

  #demo1:hover {
    border-color: red;
  }

  #demo2 {
    -webkit-transition:all 3s ease;
    -moz-transition:all 3s ease;
    -ms-transition:all 3s ease;
    -o-transition:all 3s ease;
    transition:all 3s ease;
  }

  #demo2:hover {
    border-color:red;
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition:background-color 1s ease;
    -moz-transition:background-color 1s ease;
    -ms-transition:background-color 1s ease;
    -o-transition:background-color 1s ease;
    transition:background-color 1s ease;
  }
</style>

<div id="demo1" class="demo">demo1</div>
<div id="demo2" class="demo">demo2</div>
